<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>场景秀</title>
    <link rel="icon" href="images/fish.png ">
    <link rel="stylesheet" href="liangxi.css">
        <meta name="viewport" content="width=device-width,inital-scalable=1,user-scalable=noa">
        
<style>
/*html,body{
            height: 100%;
            margin: 0px;*/
            
        /*}*/
        body{ 
              height: 100vh;
              background-color: #BBE2F4;
              display: flex;
              align-items: center;
              justify-content: center;
              perspective: 6500px;
              perspective-origin: 250%  -150%;
        }
        section{
         width: 100px;
         height: 100px;
         transform-style: preserve-3d;
         animation: donghu 2s ease-out infinite;
         position: absolute;
         left: calc(50% - 80px/2);
         top: 40vh;
        }
        section div{
            position: absolute;
            width: 100%;
            height: 100%;
            background-size: 100%;
            border: 1px solid black;
            text-align: center;
          
        }
        #d1{
            /*height: 30px;*/
            
            border-radius:12px;
            border: 1px solid gray;
            
            background-color: red;
            transform: translateZ(50px) ;
            background-image: url('images/good.jpg');
        }
         /*#d1 a{
             width: 60px;
         
            
            
         }*/
        #d2{
            background-color: green;
            transform: translateZ(-50px) ;
            background-image: url('images/good.jpg');
        }
        #d3{
            background-color: palegoldenrod;
            transform: translateX(-50px) rotateY(90deg);
            background-image: url('images/good.jpg');
        }
        #d4{
            background-color: pink;
            transform: translateX(50px) rotateY(90deg);
            background-image: url('images/good.jpg');
        }
        #d5{
            background-color: paleturquoise;
            transform: translateY(-50px) rotateX(90deg);
            background-image: url('images/good.jpg');
        }
        #d6{
            background-color: saddlebrown;
            transform: translateY(50px) rotateX(90deg);
            background-image: url('images/good.jpg');
        }
         @keyframes donghu
        {
            0%{
                transform:  rotateX(0deg) ;
            }
            25%{
                transform:  rotateX(90deg) ;
            }
            50%{
                   transform:  rotateX(180deg) ;
            }
            75%{
                 transform:  rotateX(270deg) 
            }
            100%{
                transform:  rotateX(360deg) ;
            }
        }
    </style>
</head>
<body>
    <div id="container">
        <img src="images/timg.jpg" class="bigfish">
        <!--<img src="images/text.png"class="text" >-->
         <section >
        <div id="d1"></div>
        <div id="d2"></div>
        <div id="d3"></div>
        <div id="d4"></div>
        <div id="d5"></div>
        <div id="d6"></div>
    </section>
        <img src="images/ice.png" class="ice">
        <img src="images/water.png" class="water">
        <img src="images/first-fish.png" class="firstfish">
        <img src="images/second-fish.png" class="second-fish">
        <img src="images/bubble.png" class="bubble">
        <span class="text"> 不要慨叹世事不公，你失去的，只是一些不属于你的东西；你得到的，也都在渐渐地散失。一无所有才是我们最终的结局，不要忽略离我们最近的幸福。</span>
        <img src="images/liantu.png" class="weixin">
        <div class="musicplay" onclick="playpause()"></div>
        <!--<img  class="musicplay" src=images/muted.png" onclick="playpause()" class="muted">-->
        <!--通过audio标签加载音频-->
        <!--loop 循环播放-->
        <!--preload 页面加载时进行加载 预播放-->
        <!--autoplay -->
        <audio id="music" loop preload="preload" src=" images/hua.mp3">
        你的浏览器不支持html5，就换个浏览器吧！</audio>

        <!---->
    </div>
    
</body>
</head>
<body>
   
<script>
    // 通过id获取audio标签
  var audio = document.getElementById('music')
  var musicplay = document.getElementsByClassName('musicplay')[0]
  function playpause(){
    //   判断音频是否播放
    // paused:暂停
    // audio。pausesd获取到的值有两种：（1）ture
    if(audio.paused == true){
        // 如果音频是暂停的 就播放
        musicplay.style.backgroundImage = "url(images/sound.png)";
        audio.play();
        
    }
    else{
        // 否则就暂停
        musicplay.style.backgroundImage = "url(images/muted.png)";
         audio.pause();
               
    }
  }
</script>
</html>